import React from 'react';
import { Modal } from 'antd';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import AgentService from '@/modules/Agent';
interface RecordingAlertProps {
	visible?: boolean;
	content: string;
	onClose?: () => void;
	onOk?: () => void;
}
const RecordingModal = styled(Modal)`
	.ant-modal-content {
		.ant-modal0header {
			.ant-modal-title {
				font-size: 14px;
				font-weight: 500;
				color: #202020;
				line-height: 20px;
			}
		}
		.ant-modal-body {
			.recordingAlert-text {
				font-size: 13px;
				font-weight: 400;
				color: #202020;
				line-height: 18px;
			}
		}
		.ant-modal-footer {
			button {
				border-radius: 4px;
			}
		}
	}
`;
const RecordingAlert = (props: RecordingAlertProps) => {
	const { t } = useTranslation();
	const { visible, onClose, onOk, content } = props;
	return (
		<RecordingModal zIndex={9999} title={t('notifation')} okText={t('hangup-the-call')} cancelText={t('continue-the-call')} open={visible} onCancel={onClose} onOk={onOk}>
			<div className="recordingAlert-text">{content}</div>
		</RecordingModal>
	);
};
export default RecordingAlert;
